<html xmlns:color="http://www.w3.org/1999/xhtml">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="IE=edge">
    <title>用户管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../static/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../static/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/plugins/angularjs/toaster.min.css">
    <script src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../static/plugins/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../static/plugins/angularjs/angular.min.js"></script>
    <script type="text/javascript" src="../static/plugins/angularjs/angular-animate.min.js"></script>
    <script type="text/javascript" src="../static/plugins/angularjs/toaster.min.js"></script>

    <style>
        .tab{
            margin-left:300px;
        }
        .box-body{
            text-align:left;
        }
        .top{
            float: right;
            padding-right: 230px;
        }
    </style>

    <script type="text/javascript">
        var app = angular.module("TbUserVO",[]);
        app.controller("TbUserVOController",function ($scope,$http) {

            $scope.model = {
                "id": "",
                "userId": "",
                "userName": "",
                "password": "",
                "sex": "",
                "age": "",
                "birthday": "",
                "phone": "",
                "mail": "",
                "departmentId": "",
                "departmentName": ""
            };
            $scope.pages = function (pageNum, pageSize) {

                if (pageNum == null || pageNum == "") {
                    pageNum = $("#pagenum").val();
                }
                if (pageSize == null || pageSize == "") {
                    var myselect = document.getElementById("pageSize");
                    var index = myselect.selectedIndex;
                    var optionsval = myselect.options[index].value;
                    pageSize = optionsval;
                }
                $scope.model.pageNum = pageNum;
                $scope.model.pageSize = pageSize;
                $http({
                    url: "selectUser",
                    method: "post",
                    data: $scope.model,
                    dataType: "json",
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    transformRequest: function (obj) { //在请求之前对data传参进行格式转换
                        var str = [];
                        for (var p in obj) {
                            str.push(p + "=" + obj[p]);
                        }
                        return str.join("&");
                    }
                }).success(function (data) {//请求成功并返回数据
                    $scope.pageUtil = data;
                })
            }
            $scope.addDoctorUser = function () {
                var userId = $scope.model.userId;
                var password = $scope.model.password;
                var userName = $scope.model.userName;
                var phone = $scope.model.phone;
                var mail = $scope.model.mail;
                var sex = $scope.model.sex;
                var age = $scope.model.age;
                var birthday = $scope.model.birthday;
                var departmentId = $scope.model.departmentId;
                $http({
                    url: "addDoctor",
                    method: "get",
                    params: {
                        "userId": userId,
                        "password": password,
                        "userName": userName,
                        "phone": phone,
                        "mail": mail,
                        "sex": sex,
                        "age": age,
                        "birthday": birthday,
                        "departmentId": departmentId
                    }
                }).success(function (data) {
                    $scope.model = data
                    history.go(0);
                })
            }
            $scope.findOne = function (id) {
                $scope.id = id;
                $http({
                    url: "selectOne",
                    method: "get",
                    params: {
                        "id": id
                    }
                }).success(function (data) {
                    $scope.entity = data;
                })
            }
            $scope.updateOne = function(){
                var id = $scope.id;//查询单条数据是存储到作用于中的id.
                $scope.entity.id = id;
                var enty = $scope.entity;//获得修改完成后页面所有的数据
                $http({
                    url:"updateOne",
                    method:"post",
                    data:enty,
                    headers:{ 'Content-Type': 'application/x-www-form-urlencoded' },
                    transformRequest: function (obj) {
                        var str = [];
                        for(var p in obj){
                            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                        }
                        alert("修改成功");
                        return str.join("&")
                    }
                }).success(function (data) {
                    history.go(0);
                })
            }
        });
        $(function () {
            $.ajax({
                url:'department',
                type:"post",
                dataType:"json",
                success:function (list) {
                    var s = '';
                    for (var i=0;i<list.length;i++){
                        s+="<option value = '"+list[i].departmentId+"'>"+list[i].departmentName+"</option>"
                    }
                    $("#departmentId,#departmentId2,#departmentId3").append(s);
                }
            })
        })
        function fatherChecked() {
            //定义父选择器
            var father = $("[name=fathercheck]");
            //定义子选择器
            var children = $("[name=childrencheck]");
            //如果选中父选择器
            if(father.prop("checked")){
                //则子选择器全部循环遍历选中
                for (var i=0;i<children.length;i++){
                    //childre[i].checked = true;//js写法
                    //给子选择器选择属性赋值为true
                    $(children[i]).prop("checked",true);
                }
            }else{
                //否则未选中父选择器则遍历循环子选择器
                for(var i=0;i<children.length;i++){
                    //给子选择器选择属性赋值为false
                    $(children[i]).prop("checked",false);
                }
            }
        }
        function childrenChecked(){
            var father = $("[name=fathercheck]");
            var children = $("[name=childrencheck]");
            var bool = true;
            for(var i=0;i<children.length;i++){
                //如果子选择器没被选择 bool为false
                if(!children[i].checked){
                    bool=false;
                    break;
                }
            }
            father.prop("checked",bool);
        }
        function removeBeach() {
            var children = $("[name=childrencheck]");
            var array = new Array;
            var b = false;
            for (var i = 0;i < children.length;i++) {
                if (children[i].checked) {
                    b = true;
                    console.log($(children[i]).val());
                    array.push(children[i].value);
                }
            }
            if (b) {
                $.ajax({
                    url: "deleteBeach",
                    type: "post",
                    data: {
                        ids: array
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            alert("删除成功")
                            history.go();
                        } else alert("删除失败")
                    }
                })
            } else {
                alert("请选择要提交的数据")
            }
        }
        function exportCatalogAll() {
            window.location.href = "exportCatalogAll";
        }
    </script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="TbUserVO" ng-controller="TbUserVOController" ng-init="pages()">
<!-- .box-body -->
<toaster-container toaster-options="{'time-out': 1000,'position-class':'toast-top-center'}"></toaster-container>

<div class="box-header with-border" style="background-color: #00BFFF;color:#FFFFFF;width: 1470px">
    <h3 class="box-title">用户管理</h3>
    <div class="top">
        <h5 class="setting">
            <a href="" style="background-color: #00BFFF;color:#FFFFFF;">随访进度管理</a>
            <a href="" style="background-color: #00BFFF;color:#FFFFFF;">数据复核</a>
            <a href="" style="background-color: #00BFFF;color:#FFFFFF;">分组管理</a>
            <a href="" style="background-color: #00BFFF;color:#FFFFFF;">系统设置</a>
            <a href="" style="background-color: #00BFFF;color:#FFFFFF;">账号设置</a>
        </h5>
    </div>
</div>
<div class="box-body">
    <div class="has-feedback">
        <div style="text-align: center;background: #ffff">
            <table class="tab">
                <tr class="col-md-6">
                    <td width="100px"><span >用户ID：</span></td>
                    <td><input padding-center; ng-model="model.userId"></td>
                </tr>
                <tr class="col-lg-6">
                    <td width="100px"><span>密码：</span></td>
                    <td><input padding-center; ng-model="model.password"></td>
                </tr>
                <tr class="col-lg-6">
                    <td width="100px"><span>姓名：</span></td>
                    <td><input padding-center; ng-model="model.userName"></td>
                </tr>
                <tr class="col-md-6">
                    <td width="100px"><span >性别：</span></td>
                    <td><select padding-center; ng-model="model.sex" class="form-control">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                    </td>
                </tr>
                <tr class="col-lg-6">
                    <td width="100px"><span>电话：</span></td>
                    <td><input padding-center; ng-model="model.phone"></td>
                </tr>
                <tr class="col-lg-6">
                    <td width="100px"><span>邮箱：</span></td>
                    <td><input padding-center; ng-model="model.mail"></td>
                </tr>
                <tr class="col-md-6">
                    <td width="100px"><span >科室：</span></td>
                    <td><select padding-center; ng-model="model.departmentId" class="form-control" id="departmentId" name="departmentName">
                        <option value="0">所有科室</option>
                    </select>
                    </td>
                </tr>
            </table>
            <div style="text-align: center;padding-top: 10px">
                <button class="btn btn-default"ng-click="pages()" style="background-color: #00BFFF;color:#FFFFFF">查询</button>
            </div>
        </div>
    </div>
    <div class="box-body">
        <!-- 数据表格 -->
        <div class="table-box">
            <!-- 数据表格 -->
            <div class="table-box">
                <!--工具栏-->
                <div class="pull-left">
                    <div class="form-group form-inline">
                        <div class="btn-group">
                            <!--onClick点击事件触发调用方法-->
                            <button type="button" class="btn btn-xs" data-toggle="modal" data-target="#editModal" style="background-color: #00BFFF;color:#FFFFFF" >新增</button>
                            <button type="button" class="btn btn-xs" style="background-color:#00BFFF;color:#FFFFFF" onclick="removeBeach()">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--工具栏/-->
            <!--数据列表-->
            <table id="dataList" class="table table-bordered table-striped table-hover dataTable" style="background-color: #00BFFF;color:#FFFFFF">
                <thead>
                <tr>
                    <th class="sorting_asc"><input type="checkbox" id="fathercheck" onclick="fatherChecked()" name="fathercheck"/></th>
                    <th class="sorting_asc">序号</th>
                    <th class="sorting_asc">用户id</th>
                    <th class="sorting_asc">用户姓名</th>
                    <th class="sorting_asc">性别</th>
                    <th class="sorting">电话</th>
                    <th class="sorting">邮箱</th>
                    <th class="sorting">科室</th>
                    <th class="sorting">修改</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="user in pageUtil.result" style="color: black;background-color:whitesmoke">
                    <td><input type="checkbox" id="childrencheck" onclick="childrenChecked()" ng-value="user.id" name="childrencheck"/></td>
                    <td>{{user.id}}</td>
                    <td ng-bind="user.userId"></td>
                    <td>{{user.userName}}</td>
                    <td>{{user.sex==1?'男':"女"}}</td>
                    <td>{{user.phone}}</td>
                    <td>{{user.mail}}</td>
                    <td>{{user.departmentName}}</td>
                    <td>
                        <button type="button" class="btn btn-xs" data-toggle="modal" data-target="#editModal2" ng-click="findOne(user.id)" style="background-color:#00BFFF;color:#FFFFFF">修改</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--数据列表/-->
            <!--分页工具条展示-->
            <div>
                <button type="button" ng-click="pages(1)" class="btn btn-xs" style="background-color: #00BFFF;color:#FFFFFF">首页</button>
                <button type="button" ng-click="pages(pageUtil.prePage)" class="btn btn-xs" style="background-color: #00BFFF;color:#FFFFFF">上一页</button>

                <button type="button" ng-click="pages(pageUtil.nextPage)" class="btn btn-xs" style="background-color: #00BFFF;color:#FFFFFF">下一页</button>
                <button type="button" ng-click="pages(pageUtil.pages)" class="btn btn-xs" style="background-color: #00BFFF;color:#FFFFFF">尾页</button>
                <td>分页页数</td>
                <td>
                    <select id="pageSize" type="text" ng-click="pages()">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                    </select>
                </td>
                <td>转到</td>
                <td><input id="pagenum" type="text"style="width:42px;height:22.44px"; value="1" ng-click="pages()"/></td>
                <td><button type="button" ng-click="pages()"class="btn btn-xs" style="background-color: #00BFFF;color:#FFFFFF">GO!</button></td>
                <td>共{{pageUtil.total}}条数据</td>
            </div>
        </div>
        <!-- 数据表格 /-->
    </div>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:80%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button id="bt1" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">添加页面</h3>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-striped"  >
                        <tr>
                            <td>用户ID:</td>
                            <td><input ng-model="model.userId" class="form-control"></td>
                            <td>密码:</td>
                            <td><input ng-model="model.password" class="form-control"></td>
                            <td>姓名:</td>
                            <td><input ng-model="model.userName" class="form-control"></td>
                            <td>电话:</td>
                            <td><input ng-model="model.phone" class="form-control"></td>
                            <td>邮箱:</td>
                            <td><input ng-model="model.mail" class="form-control"></td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td><select ng-model="model.sex" class="form-control">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </td>
                            <td>年龄:</td>
                            <td><input ng-model="model.age" class="form-control"></td>
                            <td>生日:</td>
                            <td><label for="meeting"></label><input ng-model="model.birthday" id="meeting" type="date" /></td>
                            <td>科室</td>
                            <td><select ng-model="model.departmentId" class="form-control" id="departmentId2" >
                                    <option value="0"></option>
                                 </select>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" ng-click="addDoctorUser()"  style="background-color:#00BFFF;color:#FFFFFF">保存</button>
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:80%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button id="bt" type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h3 id="myModalLabe">修改页面</h3>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-striped"  >
                        <tr>
                            <td>用户ID:</td>
                            <td><input ng-model="entity.userId" class="form-control"></td>
                            <td>密码:</td>
                            <td><input ng-model="entity.password" class="form-control"></td>
                            <td>姓名:</td>
                            <td><input ng-model="entity.userName" class="form-control"></td>
                            <td>电话:</td>
                            <td><input ng-model="entity.phone" class="form-control"></td>
                            <td>邮箱:</td>
                            <td><input ng-model="entity.mail" class="form-control"></td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td><select ng-model="entity.sex" class="form-control">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                            </td>
                            <td>年龄:</td>
                            <td><input ng-model="entity.age" class="form-control"></td>
                            <td>当前科室:</td>
                            <td><input disabled="disabled" ng-model="entity.departmentName" class="form-control"></td>
                            <td>修改科室</td>
                            <td><select ng-model="entity.departmentId" class="form-control" id="departmentId3" >
                            </select>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button ng-click="updateOne()" class="btn btn-success"style="background-color:#00BFFF;color:#FFFFFF">保存</button>
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>